<script setup>
import { nextTick, ref } from 'vue';
import {
  getMenuDetailService,
  getMenuListForSelectService,
  menuEditService
} from '@/apis/system-manage';

const menuModelRef = ref();
const belongMenus = ref([]);
const menuModel = ref({});

let isGiveupWarning = false;
const handleClose = (done) => {
  // 判断是否有部分表单已经赋值了
  var hasValueProps = Object.keys(menuModel.value).filter(
    (key) => menuModel.value[key]
  );
  if (hasValueProps.length > 0) {
    if (!isGiveupWarning) {
      ElMessage.warning('当前的 分类 未保存，放弃保存请再次点击取消');
      isGiveupWarning = true;
      setTimeout(() => {
        isGiveupWarning = false;
      }, 3000);
      return;
    }
  }

  if (done) {
    done();
  } else {
    dialogVisible.value = false;
  }
};

const rules = ref({
  menuName: [
    {
      required: true,
      message: '请输入 菜单 名称',
      trigger: 'blur'
    }
  ],
  menuPath: [
    {
      required: true,
      message: '请输入 菜单路径',
      trigger: 'blur'
    }
  ],
  sortNum: [
    {
      required: true,
      message: '请输入数字',
      trigger: 'blur'
    }
  ]
});

const dialogVisible = ref(false);
const title = ref('');
const open = async (id) => {
  nextTick(() => {
    menuModelRef.value &&
      menuModelRef.value.clearValidate &&
      menuModelRef.value.clearValidate();
  });
  menuModel.value = {};

  dialogVisible.value = true;
  title.value = id ? '编辑菜单' : '新增菜单';

  if (!id) {
    let belongRes = await getMenuListForSelectService();
    belongMenus.value = belongRes.data;
  } else {
    Promise.all([
      getMenuDetailService({ id: id }),
      getMenuListForSelectService()
    ]).then((resArr) => {
      let detailRes = resArr[0];
      let belongRes = resArr[1];

      menuModel.value = detailRes.data;
      belongMenus.value = belongRes.data;
    });
  }
};

defineExpose({
  open
});

const emit = defineEmits(['finishEdit']);

const onConfirm = async () => {
  await menuModelRef.value.validate();
  let menuModelCopy = JSON.parse(JSON.stringify(menuModel.value));
  let res = await menuEditService(menuModelCopy);
  ElMessage.success(res.msg);
  dialogVisible.value = false;
  emit('finishEdit');
};
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="30%"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form
      ref="menuModelRef"
      :model="menuModel"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="父级菜单">
        <el-select
          v-model="menuModel.belongId"
          placeholder="请选择父级菜单"
          style="width: 100%"
        >
          <el-option label="无" value="" />
          <el-option
            v-for="(item, index) in belongMenus"
            :key="index"
            :label="item.menuName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="menuModel.menuName"></el-input>
      </el-form-item>
      <el-form-item label="菜单路径" prop="menuPath">
        <el-input v-model="menuModel.menuPath"></el-input>
      </el-form-item>
      <el-form-item
        label="菜单图标"
        prop="menuIcon"
        class="menu-icon-container"
      >
        <el-input v-model="menuModel.menuIcon" style="width: 300px"></el-input>
        <el-icon>
          <component :is="menuModel.menuIcon"></component>
        </el-icon>
      </el-form-item>
      <el-form-item label="排序号" prop="sortNum">
        <el-input-number
          :min="1"
          :precision="0"
          v-model="menuModel.sortNum"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onConfirm">确认</el-button>
        <el-button @click="handleClose()"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.menu-icon-container i {
  font-size: 30px;
  margin-left: 30px;
}
</style>
